<template>
	<view :style="{'--main-color-1':configInfo.mainColor,'--main-color-2':configInfo.mainColor1}">
		<view class="status_bar"></view>
		<view class="header rel">
			<view class="top-bar-bg"></view>
			<view class="p-sm p-l-md p-r-md rel">
				<view class="flex-between" style="flex-wrap: nowrap;">
					<view class="header_city flex-start" @click="changeCity">
						<m-icon name="map-pin-line" :text="currentCity.city_name ? currentCity.city_name : '加载中'" textSize="28rpx"></m-icon>
					</view>
					<view class="header_search flex-center m-l-md m-r-md">
						<u-search
							:placeholder="$t('search.placeholder')"
							:show-action="true" 
							:actionText="$t('search.title')"
							:animation="true" 
							bgColor="transparent"
							@custom="searchHistory"
							search="searchHistory"
						>
						</u-search>
					</view>
					<view class="header_message flex-center">
						<view class="meta_message position-relative flex-center" @click="$util.go('message/message',{login:true})">
							<m-icon name="message-3-line" size="45rpx" color="#666" textSize="24rpx" :textColor="configInfo.btbColor"></m-icon>
							<u-badge class="meta-message-badge" type="error" shape="circle" max="99" :value="userInfo.noread_message"></u-badge>
						</view>
					</view>
				</view>
			</view>
			<u-swiper
				:list="banners"
				radius='5px'
				keyName="name"
				previousMargin="30rpx"
				nextMargin="30rpx"
				indicator
				indicatorActiveColor="var(--main-color-1)"
				circular
				@click="bannerClick"
				v-if="banners"
			></u-swiper>
			<m-navs
				:list="tabNavs" 
				size="35" 
				labelSize="25rpx" 
				v-if="tabNavs"
				:isImage="isNavImage"
				space="8px"
			>
			</m-navs>
		</view>
		
		<view class="index-notice p-l-md p-r-md" v-if="noticeText.length > 0">
			<u-notice-bar
				:text="noticeText"
				direction="column"
				color="#f29100"
				fontSize="28rpx"
				bgColor="transparent"
				@click="noticeClick"
			></u-notice-bar>
		</view>
<!-- 	<u-tabs
			class="m-t-sm"
			:list="sortTab" 
			lineWidth="20"
			lineHeight="3"
			lineColor="var(--main-color-1)"
			itemStyle="height: 40px;"
			:activeStyle="{
				fontWeight:'600',
				fontSize:'29rpx',
				color:'#232426',
			}"
			:inactiveStyle="{
				fontSize:'29rpx',
				color:'#909193',
			}"
			:scrollable="false"
			@change="sortChange"
		>
		</u-tabs> -->
		<!-- 多选 -->
		<view class="m-t-md m-l-md m-r-md">
			<view class="title-part flex-between flex-align-items" >
				<text class="text-weight">精选兼职</text>
				<view class="flex-start">
					<view class="" v-for="(item, index) in sortRadio" :key="index">
						<u-tag 
							class="m-l-sm" 
							:text="item.title" 
							:plain="!item.checked" 
							size="mini" 
							type="warning" 
							:name="index"
							:borderColor="!item.checked ? '#e0dfdf' : configInfo.mainColor"
							:bgColor="!item.checked ? '#e0dfdf' : configInfo.mainColor"
							:color="!item.checked ? '#999' : '#444'"
							@click="changeSort"
						>
						</u-tag>
					</view>
				</view>
			</view>
		</view>
		<m-loading :show="listLoad" :emptyShow="list.data.length <= 0 " :emptyText="$t('task.list.placeholder')"></m-loading>
		<m-tasks :list="list.data" v-if="!listLoad"></m-tasks>
		<uni-load-more :status="status" v-if="showLoading" :content-text="contentText"></uni-load-more>
		<!-- 首页弹窗 -->
		<u-popup class="transparent-popup" :show="indexPopup" mode="center" bgColor="transparent" :closeabl="true" @close="closeIndexPopup" v-if="configInfo.index_popup">
		    <view @click="clickIndexPopup">
				<image :src="configInfo.index_popup_img" mode="widthFix">
			</view>
		</u-popup>
		
		<!-- 切换城市 -->
		<u-picker 
			:show="changeCityShow" 
			:columns="cityList" 
			keyName="label" 
			:closeOnClickOverlay="true" 
			@cancel="changeCityShow = false"
			@confirm="changeCityConfirm"
			@close="changeCityShow = false"
		>
		</u-picker>
		
		<m-login-bar locatio="bottom" v-if="!userInfo"></m-login-bar>
		<u-back-top :scroll-top="scrollTop" :customStyle="{background:configInfo.mainColor}" :iconStyle="{color:configInfo.btnColor}"></u-back-top>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	export default {
		data() {
			return {
				showLoading:false,
				isNavImage:false,
				scrollTop: 0,
				noticeText: [],
				listLoad:true,
				// listEmptyShow:false,
				status:"loading",
				indexPopup:false,
				changeCityShow:false,
				sortRadio: [{
						title: '推荐',
						checked: true,
						sort: 	'rand'
					},
					{
						title: '热门',
						checked: false,
						sort: 	'read_count'
					},
					{
						title: '最新',
						checked: false,
						sort: 	'id'
					}
				],
			}
		},
		computed: mapState({
			userInfo: state => state.user.userInfo,
			configInfo: state => state.config.configInfo,
			banners: state => state.content.indexBanner,
			tabNavs: state => state.content.indexTabNav,
			notices: state => state.content.indexNotice,
			sortTab: state => state.task.sortTab,
			activeSort: state => state.task.activeSort,
			param: state => state.task.indexParam,
			list: state => state.task.indexList,
			contentText: state => state.content.contentText,
			cityList:state => uni.getStorageSync('cityList') ||  state.config.cityList,
			currentCity: state => uni.getStorageSync('currentCity') || state.config.currentCity,
		}),
		
		async onLoad(){
			await this.initIndex();
			await this.initCity()
		},
		
		async onShow(){
			await this.getList(1)
		},

		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		
		onPullDownRefresh(){
			this.initIndex();
			this.getList(1)
			this.$util.showToast(this.$t('app.renovate.success'),function(){
				uni.stopPullDownRefresh();
			});
		},

		async onReachBottom(){
			if (this.list.current_page >= this.list.last_page || this.ListLoad){
				this.status="nomore";
				return
			};
			this.status = "loading";
			this.showLoading = true;
			this.getList(this.param.page + 1);
		},
		
		methods: {
			...mapActions(['getIndexInfo','getTaskList','getCityList']),
			...mapMutations(['updateIndexState','updateTaskState','updateConfigState']),

			// 初始化首页
			async initIndex(){
				await this.getIndexInfo()
				if(this.notices.length > 0){
					for (let i = 0; i < this.notices.length; i++) {
						this.noticeText.push(this.notices[i]['title']);
					}
				}
				if(this.configInfo.index_popup == 1 && !uni.getStorageSync('index_popup')){
					this.indexPopup = true
				}
			},

			/** 获取任务列表 **/ 
			async getList(page = 0){
				// this.listEmptyShow = false;
				if (page) {
					let param = this.$util.deepCopy(this.param)
					param.page = page
					this.updateTaskState({
						key: 'indexParam',
						val: param
					})
				}
				let {
					currentCity,
					param,
					sortRadio,
					activeSort
				} = this
				let {
					title,
					sort
				} = sortRadio[activeSort]
				let {
					city_id,
					city_name,
				} = currentCity
				param.sort = `${sort}`
				param.city_id = `${city_id}`
				await this.getTaskList(param)
				this.listLoad = false;
				if(this.list.length <= 0)this.listEmptyShow = true;
			},
			
			noticeClick(e){
				// console.log(e)
				if(this.notices){
					for (let i = 0; i < this.notices.length; i++) {
						if(e == i){
							this.$util.go('article/article_detail?id='+this.notices[i]['id']);
						}
						
					}
				}
			},
			
			// 轮播图点击
			bannerClick(index){
				let openUrl = this.banners[index]['params']['url']
				let type = this.banners[index]['params']['type']
				if(openUrl){
					if(type == 'page'){
						uni.navigateTo({
							url: openUrl
						});
					}
					if(type == 'link'){
						this.$util.openUrl(openUrl)
					}
				}
			},
			
			// 排序
			sortChange(e){
				// console.log(e)
				this.updateTaskState({
					key: 'activeSort',
					val: e.index
				})
				this.listLoad = true
				uni.pageScrollTo({
					scrollTop: 0
				})
				this.getList(1)
			},
			
			searchHistory:function(value){
				if(value){
					// 存在搜索值
					let page = 'search/search?key='+value;
					this.$util.go(page,{login:true});
				}
				// 搜索展示
			},
			
			// 点击首页弹窗
			clickIndexPopup(){
				let type = this.configInfo.index_popup_type
				let url = this.configInfo.index_popup_url
				if(url){
					uni.setStorageSync('index_popup','true');
					if(type == 'page'){
						uni.navigateTo({
							url: url
						});
					}
					if(type == 'link'){
						this.$util.openUrl(url)
					}
				}
			},
			
			// 关闭首页弹窗
			closeIndexPopup(){
				this.indexPopup = false
				uni.setStorageSync('index_popup','true');
			},
			
			// 初始化城市
			async initCity(){
				// 查询IP归属地
				let currentCity = this.currentCity
				if(currentCity.city_id || currentCity.city_id === 0)return
				let res = (await this.$api.content.getIpLocation()).data
				if(res.city_id){
					currentCity = res
					this.updateConfigState({
						key: 'currentCity',
						val: currentCity
					})
					await this.getList()
				}else{
					this.changeCityShow = true
				}
			},
			
			// 切换城市
			async changeCity(){
				await this.getCityList();
				// 获取当前所选择城市
				this.changeCityShow = true
			},
			
			// 选择城市
			async changeCityConfirm(e){
				let selected = e.value[0]
				let currentCity = this.currentCity
				currentCity.city_id = selected.id
				currentCity.city_name = selected.label
				this.updateConfigState({
					key: 'currentCity',
					val: currentCity
				})
				this.listLoad = true
				this.changeCityShow = false
				await this.getList()
			},
			
			// 切换排序
			async changeSort(name){
				// console.log(e)
				this.listLoad = true
				// let {
				// 	param
				// } = this
				// param.sort = this.sortRadio[index].sort
				this.updateTaskState({
					key: 'activeSort',
					val: name
				})
				this.sortRadio.map((item, index) => {
					item.checked = index === name ? true : false
				})
				await this.getList()
				// this.sortRadio[index].checked = true
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color:var(--theme-page-bg);
	}
	// /deep/ .transparent-popup .u-popup__content{
	// 	background: transparent;
	// }
	.header{
		background-color: #fff;
		&_city{
			// width: 20%;
			height: 70rpx;
			flex: none;
		}
		&_search{
			flex:1;
			box-sizing: border-box;
			// width: 100%;
			background-color: #eee;
			border-radius: 25px;
			padding-right: 10px;
			height: 70rpx
		}
		&_message{
			position: relative;
			// width: 15%;
			// background-color: var(--theme-line-four);
			border-radius: 25px;
			height: 70rpx
		}
		&_message::before{
			position: absolute;
			content: '';
			width: 30rpx;
			height: 30rpx;
			border-radius: 100%;
			background-color: var(--main-color-1);
			margin-top: 15rpx;
			margin-left: 15rpx;
			opacity: .5;
			// bottom: -10rpx;
		}
		&__metas{

		}
		.meta{
			&_item{
				margin-right: 15rpx;
			}
		}
		.meta-message-badge{
			position: absolute;
			left: 25rpx;
			top: -3px;
			font-size: 20rpx;
		}
		.i-icon{
			display: block;
		}
		.u-swiper{
			background-color: transparent!important;
		}
	}
	.index-notice{
		
		background-color: var(--theme-warning-light);
	
		// border-radius: 15px;
		// padding: 5rpx 0px;
		// background-color: #fff;
		// border-bottom-left-radius: 0px;
		// border-top-right-radius: 10px;
		// border-bottom-right-radius: 10px;
		// border:1px solid var(--maincolor2);
	}
	/deep/ .u-notice-bar{
		padding-left: 0;
		padding-right: 0;
	}
    .status_bar{
        height: var(--status-bar-height);
        width: 100%;
		background-color: #fff;
    }
	.m-topsearch{
		position: sticky;
		top: 0;
		// z-index: 99;
	}
	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}
	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	.title-part text{
		position: relative;
	}
	.title-part text::before{
		position: absolute;
		content: '';
		width: 100%;
		height: 10rpx;
		background-color: var(--main-color-1);
		left: 0;
		bottom: 0;
		opacity: .3;
	}
</style>
